<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <#include "/comm/module-edit.ftl"/>
</head>
<style type="text/css">

</style>
<body>
<div class="layui-div-body">
    <div class="layui-fluid layui-div-edit">
        <form class="layui-form layui-form-pane">
<#--            <div class="layui-form-item">-->
<#--                <div class="layui-inline">-->
<#--                    <label class="layui-form-label">编码</label>-->
<#--                    <div class="layui-input-inline">-->
<#--                        <input type="text" name="code" placeholder="请输入编码" class="layui-input"-->
<#--                               value="${info.code!}">-->
<#--                    </div>-->
<#--                </div>-->
<#--                <div class="layui-inline">-->
<#--                    <label class="layui-form-label">类型</label>-->
<#--                    <div class="layui-input-inline">-->
<#--                        <input type="text" name="type" placeholder="请输入类型" class="layui-input"-->
<#--                               value="${info.type!}">-->
<#--                    </div>-->
<#--                </div>-->
<#--            </div>-->

            <div class="layui-form-item">
                <label class="layui-form-label">封面图</label>
                <div class="layui-input-inline" style="width: 60%;">
                    <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                        <i class="layui-icon layui-icon-upload"></i> 选择封面图
                    </button>
                    <div style="width: 132px;">
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;"
                                 src="${info.img!}">
                            <input type="hidden" id="img" name="img" value="${info.img!}">
                            <div id="ID-upload-demo-text"></div>
                        </div>
                        <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                </div>
            </div>
<#--            <div class="layui-form-item">-->
<#--                <label class="layui-form-label">链接</label>-->
<#--                <div class="layui-input-block">-->
<#--                    <input type="text" name="url" placeholder="请输入链接" lay-verify="url" class="layui-input"-->
<#--                           value="${info.url!}">-->
<#--                </div>-->
<#--            </div>-->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-inline">
                        <input type="number" name="seq"
                               placeholder="请输入数值" lay-affix="number" min="0" step="1" value="${info.seq!1}"
                               class="layui-input">
                    </div>
                </div>
            </div>
<#--            <div class="layui-form-item">-->
<#--                <div class="layui-inline">-->
<#--                    <label class="layui-form-label">展示时间</label>-->
<#--                    <div class="layui-input-inline  layui-input-wrap">-->
<#--                        <div class="layui-input-prefix">-->
<#--                            <i class="layui-icon layui-icon-date"></i>-->
<#--                        </div>-->
<#--                        <input type="text" name="startTime" id="startTime" autocomplete="off"-->
<#--                               class="layui-input date-input" placeholder="开始时间" value="${info.startTime!}">-->
<#--                    </div>-->
<#--                    <div class="layui-form-mid">-</div>-->
<#--                    <div class="layui-input-inline  layui-input-wrap">-->
<#--                        <div class="layui-input-prefix">-->
<#--                            <i class="layui-icon layui-icon-date"></i>-->
<#--                        </div>-->
<#--                        <input type="text" name="endTime" id="endTime" lay-verify="date" autocomplete="off"-->
<#--                               class="layui-input  date-input" placeholder="结束时间" value="${info.endTime!}">-->
<#--                    </div>-->
<#--                </div>-->
<#--            </div>-->


            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="description" placeholder="请输入备注" id="editTextarea"
                              class="layui-textarea">${info.description!}</textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" lay-filter="save">立即提交
                </button>
                <#if info._id ==''>
                    <button type="reset" class="layui-btn layui-btn-primary" id="btn-reset">重置</button>
                </#if>
                <input type="hidden" id="_id" name="_id" value="${info._id}"/>
            </div>
        </form>
    </div>
</div>
<script>
    layui.use("edit", function () {
        let edit = layui.edit, $ = layui.$, form = layui.form, layer = layui.layer,element = layui.element;
        edit.render()
        let laydate = layui.laydate;
        // 日期
        laydate.render({
            elem: '.date-input',
            format: 'yyyy-MM-dd HH:mm',
            type: 'datetime',
            fullPanel: true // 2.8+
        });
        form.verify({
            url: function (value) {
                if (value && !/^https?:\/\/[^\s]+$/.test(value)) {
                    return '请输入有效的URL地址';
                }
            },
            date: function (value) {
                const star = $("#star_time").val()
                const date1 = new Date(star);
                const date2 = new Date(value);
                if (value && date2 < date1) {
                    return '结束时间必须大于开始时间';
                }
            }
        });
        var upload = layui.upload;
        // 单图片上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: '${request.contextPath}/comm/uploadRes', // 实际使用时改成您自己的上传接口即可。
            data: {//传递给上传接口的额外参数，支持静态赋值和动态赋值两种写法
                type: 'image',
                folder: "advertising",
            },
            accept: "images",//指定允许上传时校验的文件类型。可选值有：images 图片类型file 所有文件类型video 视频类型audio 音频类型
            before: function (obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                });

                element.progress('filter-demo', '0%'); // 进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function (res) {
                console.log(res)
                // 若上传失败
                if (res.code <= 0) {
                    return layer.msg('上传失败！', {icon: 5});
                }
                var demoText = $('#ID-upload-demo-text');
                demoText.html('<a class="layui-btn layui-btn-xs  layui-btn-danger deleteImage">删除</a>');
                demoText.find('.deleteImage').on('click', function () {
                    $('#img').val(""); // 图片链接（base64）
                    $('#ID-upload-demo-img').removeAttr('src'); // 图片链接（base64）
                    element.progress('filter-demo', '0%'); // 进度条复位
                    demoText.html("")
                });
                $('#img').val(res.data); // 图片链接（base64）
                // 上传成功的一些操作
                //$('#ID-upload-demo-text').html(''); // 置空上传失败的状态
            },
            error: function () {
                // 演示失败状态，并实现重传
                var demoText = $('#ID-upload-demo-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            },
            // 进度条
            progress: function (n, elem, e) {
                element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                if (n === 100) {
                    layer.msg('上传成功', {icon: 1});
                }
            }
        });
    });
</script>
</body>

</html>
